<!DOCTYPE html>
<html lang="en">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
			name="viewport">
		<meta charset="UTF-8">
		<title>合肥婚纱摄影-合肥婚纱照-合肥金夫人集团官网</title>
		<meta content="telephone=no" name="format-detection" />
		<meta content="no-cache" http-equiv="pragma">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" href="/public/css/amazeui.min.css">
		<link rel="stylesheet" href="/public/css/jquery.bxslider.css">
		<link rel="stylesheet" href="/public/css/style.css">
		<link rel="stylesheet" href="/public/css/index.css">
		<link href="/public/css/animate.css" rel="stylesheet" />
		<link href="/public/css/nav.css" rel="stylesheet" />
		<link href="/public/css/modify2.css" rel="stylesheet" />
		<script src="/public/js/jquery.js"></script>
		
		<script src="/public/js/vue.js"></script>
		<!-- 引入element样式 -->
		<link href="/public/css/element.min.css" rel="stylesheet" />
		<!-- 引入element组件库 -->
		<script src="/public/js/element.min.js"></script>
		<script src="/public/js/axios.min.js"></script>
		<script src="/public/js/style.js"></script>
		<script src="/public/js/http.js"></script>
	</head>
	
	<body id="body-wrap">
		<div class="love" id="userVue">
			<header id="layout-header">
				<nav class="index-nav" id="index-nav">
					<ul class="m-1200 ul-list">
						<li class="nli ">
							<a href="/api/front/qianduan/index" class="n-a">
								<p class="nli-p">首页</p>
								<span class="nli-span">Home</span>
							</a>
						</li>

						<li class="nli ">
							<a href="/api/front/qianduan/custom" target="_self"
							   class="n-a">
								<p class="nli-p">客片赏析</p>
								<span class="nli-span">GuestPhoto</span>
							</a>
						</li>
						<li class="nli ">
							<a href="/api/front/qianduan/case" target="_self"
							   class="n-a">
								<p class="nli-p">风格大赏</p>
								<span class="nli-span">ModelPhoto</span>
							</a>
						</li>
						<li class="nli active">
							<a href="/api/front/qianduan/user" target="_self"
							   class="n-a">
								<p class="nli-p">个人中心</p>
								<span class="nli-span">PersonalCenter</span>
							</a>
						</li>
					</ul>
				</nav>
			</header>
		
			<div class="userAll">
				<div class="userBody">
					<div class="userLeft">
						<div class="userLeftText" :class="typeText===1?'on':''" @click="clickType(1)">个人中心</div>
						<div class="userLeftText" :class="typeText===2?'on':''" @click="clickType(2)">我的预约</div>
					</div>
					<div class="userRight">
						<div class="userRightBody">
							<div v-if="typeText===1">
								<el-form :model="formZc" :rules="rulesZc" ref="addZcForm" label-position="right"  :inline="false" label-width="80px">
									<el-form-item label="昵称：" prop="nickname">
										<el-input disabled v-model="formZc.nickname" placeholder="请输入" style="width: 100%"/>
									</el-form-item>
									<el-form-item label="账号：" prop="account">
										<el-input disabled v-model="formZc.account" placeholder="请输入" style="width:  100%"></el-input>
									</el-form-item>
									
									<el-form-item label="性别：" prop="sex">
										<el-select disabled v-model="formZc.sex" placeholder="请选择"  style="width:  100%">
											<el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value"></el-option>
										</el-select>
									</el-form-item>
									<!-- <div style="display: flex;justify-content: center;margin-top: 20px;flex-direction: column;align-items: center;">
										<el-button @click="btnPost" type="primary" style="width:80%">注册</el-button>
										<div @click="goLogin" class="loginText">已有账号登录</div>
									</div> -->
								</el-form>
							</div>
							<div v-if="typeText===2" style="height: 100%;">
								<el-table border="1" v-loading="loading"  ref="sz_table" :data="yyList" >
									<el-table-column type="index" width="50" label="序号"> </el-table-column>
									<el-table-column label="风格名称" prop="fgname" :show-overflow-tooltip="true"></el-table-column>
									<el-table-column label="预约日期" prop="yydate" :show-overflow-tooltip="true"></el-table-column>
								</el-table>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
		<style>
			.userAll{width: 1200px;height: calc(100vh - 75px);margin: 0 auto;}
			.userBody{padding: 50px 0 20px;display: flex;justify-content: space-between;height: 100%;box-sizing: border-box;}
			.userLeft{width: 220px;box-sizing: border-box;padding: 0 20px 20px;}
			.userLeftText{width: 100%;height: 50px;border-radius: 10px;line-height: 50px;text-align: center;font-size: 14px;color: #000;background: #B0E0E6 ;margin-bottom: 15px;cursor: pointer;}
			.userLeftText.on{background: #d5bf8d;color: #fff;}
			.userRight{flex: 1;box-shadow: 0 0 6px #d5bf8d;border-radius: 10px;height: 100%;box-sizing: border-box;padding: 20px;}
			.userRightBody{height: 100%;overflow-y: auto;}
		</style>
		

	
		<script>
			new Vue({
				el:'#userVue',
				data:{
					loading_post:false,
					loading:false,
					typeText:1,
					yyList:[],
					sexList:[{label:'男',value:1},{label:'女',value:2}],
					formZc: {},
					rulesZc: {
						nickname: [{
							required: true,
							message: "昵称不能为空",
							trigger: "blur"
						}],
						account: [{
							required: true,
							message: "账号不能为空",
							trigger: "blur"
						}],
						pwd: [{
							required: true,
							message: "密码不能为空",
							trigger: "blur"
						}],
						sex: [{
							required: true,
							message: "性别不能为空",
							trigger: "blur"
						}],
					},	
				},
				created() {
					this.resetZc()
					this.getUserInfo()
					
				},
				methods: {
					clickType(type){
						this.typeText=type*1
						if(type*1===1){
							this.getUserInfo()
						}else{
							this.getList()
						}
					},
					resetZc(){
						this.formZc = {
							nickname:'',
							account:'',
							pwd:'',
							sex:'',
						};
						this.resetForm("addZcForm");
					},
					resetForm(refName) {
						if (this.$refs[refName]) {
							this.$refs[refName].resetFields();
						}
					},
					getUserInfo(){
						MyAxios.get('/api/front/appuser/getUserInfo').then((response)=> {
							if(response.msgcode===0){
								this.formZc.nickname=response.data.nickname
								this.formZc.account=response.data.account
								this.formZc.sex=response.data.sex
								
							}else if(response.msgcode===401){
								window.location.href='/api/front/qianduan/login'
							}else{
								this.$message.error(response.msg);
							}
						})
						.catch(function (error) {
							this.$message.error(error);
						});
					},
					getList(){
						this.loading=true
						MyAxios.get('/api/front/yuyue/list').then((response)=> {
							this.loading=false
							if(response.msgcode===0){
								this.yyList=response.data
							}else if(response.msgcode===401){
								window.location.href='/api/front/qianduan/login'
							}else{
								this.$message.error(response.msg);
							}
						})
						.catch(function (error) {
							this.loading=false
							this.$message.error(error);
						});
					},
				}
			})
		</script>




	</body>

</html>